"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform } from "react-native"
import { theme } from "../../constants/theme"
import { WordDetailSheet } from "./WordDetailSheet"

// 词根数据
const ROOT_DATA = [
    { root: "act", count: 85, meaning: "行动" },
    { root: "bio", count: 78, meaning: "生命" },
    { root: "cap", count: 72, meaning: "头；抓住" },
    { root: "dict", count: 67, meaning: "说话；断言" },
    { root: "duc/duct", count: 63, meaning: "引导；带领" },
    { root: "fac/fact", count: 59, meaning: "做；制作" },
    { root: "form", count: 56, meaning: "形式；形状" },
    { root: "graph", count: 53, meaning: "写；画" },
    { root: "ject", count: 49, meaning: "投掷；抛" },
    { root: "log", count: 47, meaning: "言语；思想" },
    { root: "mit/miss", count: 45, meaning: "送；放" },
    { root: "mov/mot", count: 43, meaning: "移动" },
    { root: "port", count: 41, meaning: "携带；运输" },
    { root: "pos", count: 39, meaning: "放置" },
    { root: "scrib/script", count: 37, meaning: "写" },
    { root: "spec/spect", count: 35, meaning: "看" },
    { root: "struct", count: 33, meaning: "建造" },
    { root: "tain", count: 31, meaning: "拿住；持有" },
    { root: "tend/tens", count: 29, meaning: "伸展；延伸" },
    { root: "tract", count: 27, meaning: "拉；拖" },
    { root: "vert/vers", count: 25, meaning: "转" },
    { root: "vid/vis", count: 23, meaning: "看" },
    { root: "voc/vok", count: 21, meaning: "叫喊；声音" },
    { root: "cred", count: 19, meaning: "相信；信任" },
    { root: "gen", count: 17, meaning: "产生；种类" },
    { root: "junct", count: 15, meaning: "连接" },
    { root: "lect", count: 13, meaning: "选择；收集" },
    { root: "man", count: 11, meaning: "手；人" },
    { root: "pend", count: 9, meaning: "悬挂；称重" },
    { root: "sent", count: 7, meaning: "感觉；感知" },
]

// 示例词数据
const ROOT_EXAMPLES = {
    act: [
        {
            word: "action",
            phonetic: "/ˈækʃn/",
            meaning: "行动；动作",
            description: "action：做某事的过程，表示行动或活动",
            parts: [
                {
                    text: "act",
                    meaning: "行动，做",
                },
                {
                    text: "ion",
                    meaning: "表示行为或状态",
                },
            ],
        },
        {
            word: "activate",
            phonetic: "/ˈæktɪveɪt/",
            meaning: "激活；使活动",
            description: "activate：使某物开始工作或变得活跃",
            parts: [
                {
                    text: "act",
                    meaning: "行动，做",
                },
                {
                    text: "ivate",
                    meaning: "使...化，使成为",
                },
            ],
        },
    ],
    bio: [
        {
            word: "biology",
            phonetic: "/baɪˈɒlədʒi/",
            meaning: "生物学",
            description: "biology：研究生命和生物体的科学",
            parts: [
                {
                    text: "bio",
                    meaning: "生命，生物",
                },
                {
                    text: "logy",
                    meaning: "学科，研究",
                },
            ],
        },
    ],
}

export default function RootTab() {
    const [selectedRoot, setSelectedRoot] = useState<string | null>(null)

    const handleRootPress = (root: string) => {
        setSelectedRoot(root)
    }

    return (
        <View style={styles.container}>
            {/* 词根统计 */}
            <View style={styles.statsContainer}>
                <Text style={styles.statsText}>
                    共 <Text style={styles.statsHighlight}>{ROOT_DATA.length}</Text> 个常用词根
                </Text>
            </View>

            {/* 词根列表 */}
            <ScrollView
                style={styles.scrollView}
                contentContainerStyle={styles.scrollContent}
                showsVerticalScrollIndicator={false}
            >
                <View style={styles.rootGrid}>
                    {ROOT_DATA.map((item) => (
                        <TouchableOpacity key={item.root} style={styles.rootItem} onPress={() => handleRootPress(item.root)}>
                            <View style={styles.rootContent}>
                                <Text style={styles.rootText}>{item.root}</Text>
                                <View style={styles.countBadge}>
                                    <Text style={styles.countText}>{item.count}</Text>
                                </View>
                            </View>
                            <Text style={styles.meaningText} numberOfLines={1}>
                                {item.meaning}
                            </Text>
                        </TouchableOpacity>
                    ))}
                </View>
            </ScrollView>

            {/* Word Detail Sheet */}
            <WordDetailSheet
                visible={!!selectedRoot}
                onClose={() => setSelectedRoot(null)}
                affix={selectedRoot || ""}
                type="root"
                examples={selectedRoot && ROOT_EXAMPLES[selectedRoot] ? ROOT_EXAMPLES[selectedRoot] : []}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    statsContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    statsText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    statsHighlight: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    scrollView: {
        flex: 1,
    },
    scrollContent: {
        padding: theme.spacing.lg,
        paddingTop: 0,
    },
    rootGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "space-between",
    },
    rootItem: {
        width: "31%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.medium,
        padding: theme.spacing.md,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 3,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    rootContent: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.xs,
    },
    rootText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
    },
    countBadge: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderRadius: theme.borderRadius.small,
        paddingHorizontal: 6,
        paddingVertical: 2,
    },
    countText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    meaningText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
    },
})

